<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-07-11 10:56:44
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-10-28 08:57:00
 * @FilePath: \education-official-website-admin\src\components\Publish\News\EdtiArticle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @FilePath: EdtiArticle.vue
 * @Author: jack
 * @Date: 2025-02-17 10:40:57
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-07-31 15:54:50
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="edtiArticle">
        <div class="drawerTop">
            <el-form v-show="!isPreviewBol" label-width="80px" size="default" :rules="editFormRules" :model="editForm"
                ref="editFormRef">
                <el-row>
                    <el-col class="leftBox" :span="16">
                        <div class="title">文章标题</div>
                        <el-form-item label="" label-width="0px" prop="title">
                            <el-input v-model="editForm.title" placeholder="请输入文章标题" maxlength="128" show-word-limit />
                        </el-form-item>
                        <el-form-item label="" label-width="0px" prop="content" style="height: calc(100% - 60px);">
                            <Editor ref="editor" v-if="editForm.content" v-model:content="editForm.content"
                                @update:content="changeInput" style="width:100%;height: 100%;overflow: hidden;" />
                            <Editor ref="editor" v-else v-model:content="editForm.content" @update:content="changeInput"
                                style="width:100%;height: 100%;overflow: hidden;" />
                        </el-form-item>
                    </el-col>
                    <el-col class="rightBox" :span="8">
                        <div class="title">设置管理</div>
                        <div class=seetingBox>
                            <el-form-item label="模块分类" prop="module_id">
                                <el-select v-model="editForm.module_id" filterable style="width:100%;"
                                    placeholder="请选择模块分类" @change="selectModule" :teleported="false">
                                    <el-option v-for="(item, index) in props.moduleType" :key="index" :label="item.name"
                                        :value="item.uuid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属分类" prop="category_id">
                                <el-cascader ref="cascader" v-model="editForm.category_id" :options="dataItem" :props="{
                                    checkStrictly: true,
                                    value: 'id',
                                    label: 'name',
                                    children: 'child',
                                }" style="width:100%;" placeholder="请选择分类" clearable :teleported="false" />
                            </el-form-item>
                            <!-- <el-form-item label="外链地址" prop="link">
                                <el-input v-model="editForm.link" placeholder="请输入文章外联地址" />
                            </el-form-item> -->
                            <el-form-item label="文章标签" prop="tagInput">
                                <!-- <el-input v-model="tagInput" @keyup.enter="handleInputConfirm"
                                    placeholder="请输入并按Enter添加" /> -->
                                <el-input v-model="tagInput" @keyup.enter="handleInputConfirm"
                                    placeholder="请输入并按Enter添加">
                                    <template #prepend>
                                        <el-select v-model="tagSelect" @change="changeSelect" placeholder="请选择"
                                            style="width: 100px">
                                            <el-option v-for="group in departmentGroups" :key="group.value"
                                                :label="group.label" :value="group.value"
                                                :disabled="editForm.tags.includes(group.value)" />
                                        </el-select>
                                    </template>
                                </el-input>
                                <el-tag
                                    style="margin: 4px 2px 0 2px;background: #E4E4E4;color: #666666;border-color: transparent;"
                                    v-for="(item, index) in editForm.tags" :key="item" closable
                                    :disable-transitions="false" @close="handleClose(index)">
                                    {{ item }}
                                </el-tag>
                            </el-form-item>
                            <el-form-item label="是否置顶" prop="is_top" style="margin-bottom: 12px;">
                                <el-switch v-model="editForm.is_top" :active-value="1" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C5C5C5">
                                </el-switch>
                            </el-form-item>
                            <!-- <el-form-item label="允许评论" prop="allow_comment" style="margin-bottom: 12px;">
                                <el-switch v-model="editForm.allow_comment" :active-value="1" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C5C5C5">
                                </el-switch>
                            </el-form-item> -->
                            <el-form-item label="允许下载" prop="allow_download" style="margin-bottom: 12px;">
                                <el-switch v-model="editForm.allow_download" :active-value="1" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C5C5C5">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="上线时间" prop="show_time" style="margin-bottom: 12px;">
                                <el-date-picker v-model="editForm.show_time" type="datetime" placeholder="请选择上线时间"
                                    align="center" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" clearable
                                    :teleported="false"></el-date-picker>
                                <div class="tips">
                                    <el-image :src="icon_tishi" width="20"></el-image>
                                    上线日期不填默认提交信息之后直接直接发表
                                </div>
                            </el-form-item>

                            <el-form-item label="过期时间" prop="expire" style="margin-bottom: 12px;">
                                <el-date-picker v-model="editForm.expire" type="datetime" placeholder="请选择过期时间"
                                    align="center" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" clearable
                                    :teleported="false"></el-date-picker>
                                <div class="tips">
                                    <el-image :src="icon_tishi" width="20"></el-image>
                                    失效日期不填，默认10年有效
                                </div>
                            </el-form-item>
                            <!-- <el-form-item label="文章封面" prop="cover">
                                <div class="uploadList">
                                    <div class="items" v-if="editForm.cover">
                                        <el-image :src="editForm.cover" fit="cover"
                                            style="width: 100%;height: 100%;"></el-image>
                                        <transition name="fade" mode="out-in">
                                            <div class="model-img-box">
                                                <div class="mine-flex-box">
                                                    <el-icon @click="showImage">
                                                        <View />
                                                    </el-icon>
                                                    <span></span>
                                                    <el-icon @click="handleRemove">
                                                        <Delete />
                                                    </el-icon>
                                                </div>
                                            </div>
                                        </transition>
                                    </div>
                                    <div v-else style="display: inline-block;height: 72px">
                                        <el-upload class="avatar-uploader" :show-file-list="false"
                                            :on-success="handleAvatarSuccess" :http-request="uploadAvatorAdd"
                                            :before-upload="beforeAvatarUpload">
                                            <el-icon class="avatar-uploader-icon">
                                                <Plus />
                                            </el-icon>
                                            <div>点击上传图片</div>
                                        </el-upload>
                                    </div>
                                </div>
                                <div class="tips">
                                    <el-image :src="icon_tishi" width="20"></el-image>
                                    建议上传大小为1240*698像素（或者它的倍数大小）,上传png/jpeg/jpg等格式
                                </div>
                            </el-form-item> -->
                            <el-form-item label="上传附件" prop="file" style="margin-bottom: 10px;">
                                <div class="uploadList2">
                                    <el-upload class="avatar-uploader" :show-file-list="false"
                                        :http-request="uploadAvatorAdd2">
                                        <el-icon class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </div>
                            </el-form-item>
                            <div class="fillBox" v-if="editForm.attachs.length > 0">
                                <div class="item" v-for="(item, index) in editForm.attachs">
                                    <div class="fileInfo">
                                        <svg class="icon svg-icon" aria-hidden="true" style="width: 18px;height: 20px;">
                                            <use v-if="item.ext == 'pdf'" xlink:href="#icon-pdf"></use>
                                            <use v-else-if="item.ext == 'jpg' || item.ext == 'png' || item.ext == 'jpeg'"
                                                xlink:href="#icon-jpg_png"></use>
                                            <use v-else-if="item.ext == 'ppt'" xlink:href="#icon-ppt"></use>
                                            <use v-else-if="item.ext == 'doc' || item.ext == 'docx'"
                                                xlink:href="#icon-doc"></use>
                                            <use v-else-if="item.ext == 'xls' || item.ext == 'xlsx'"
                                                xlink:href="#icon-xls"></use>
                                            <use v-else-if="item.ext == 'txt'" xlink:href="#icon-txt"></use>
                                            <use v-else-if="item.ext == 'mp4' || item.ext == 'mvk' || item.ext == 'mov'"
                                                xlink:href="#icon-shipinwenjian"></use>
                                            <use v-else xlink:href="#icon-zip"></use>
                                        </svg>
                                        <span>{{ item.real_name }}（{{ $util.formatFileSize(item.size) }}）</span>
                                    </div>
                                    <el-icon @click="delAttachs(index)" style="font-size: 18px;cursor: pointer;">
                                        <CircleCloseFilled />
                                    </el-icon>
                                </div>
                            </div>
                            <!-- 上传附件的进度条 -->
                            <div class="progressBox" v-if="isShowPrograss">
                                <el-progress :text-inside="true" :stroke-width="32" :percentage="percentNum"
                                    status="success" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <PreviewModule v-if="isPreviewBol" :editInfo="editForm" :attachs="editForm.attachs"></PreviewModule>
        </div>
        <div class="fixed-btn-box2" v-if="!isPreviewBol">
            <el-button type="primary" :disabled="isShowPrograss" @click="modelConfirm(editFormRef)">保存更改</el-button>
            <el-button type="primary" :disabled="isShowPrograss" class="white-bg-btn" plain
                @click="preview">预览</el-button>
            <!-- <el-button type="primary" class="white-bg-btn" plain @click="reactCancel(editFormRef)">取消</el-button> -->
        </div>
        <!-- 查看图片 -->
        <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="srcList"></el-image-viewer>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, h, onMounted, reactive, watch, toRaw } from 'vue'
import { UploadProps, UploadRequestOptions } from 'element-plus'
import * as imageConversion from 'image-conversion'; // 图片压缩
import PreviewModule from './PreviewModule.vue'
import Editor from '../../../components/Common/Editor.vue'
import upload from '../../../util/OSSUpload'
import uploadBig from '../../../util/OSSUploadBig'
import $util from '../../../util/util'
import doc from '../../../assets/images/doc.png'
import jpg_png from '../../../assets/images/jpg_png.png'
import pdf from '../../../assets/images/pdf.png'
import ppt from '../../../assets/images/ppt.png'
import xls from '../../../assets/images/xls.png'
import zip from '../../../assets/images/zip.png'
import icon_tishi from '../../../assets/images/icon_tishi.png'
import { newsCategory, addNews, detailNews, editNews } from '../../Api/Publish'
import { disabledTimeListsProps } from 'element-plus/es/components/time-picker/src/props/shared';
interface PropsType {
    editFormVisible: boolean
    editId?: string
    moduleType?: any
    subjectList?: any
    // dataItem?: any
    isPreviewBol: boolean
    resourcesTypeList?: any
}
const props = withDefaults(defineProps<PropsType>(), {
    editFormVisible: true,
    editId: '',
    moduleType: [],
    subjectList: [],
    // dataItem: [],
    isPreviewBol: false,
    resourcesTypeList: [],
})
interface EmitType {
    (e: 'modelCancel'): void
    (e: 'getList'): void
    (e: 'setModuleId', val: any): void
    (e: 'changePreviewStaus', bol: boolean): void

}
const emit = defineEmits<EmitType>()
const dataItem = ref<any>([])
// 旧数据更新数据作比较
const tagInput = ref('')
const tagSelect = ref('')
// 定义科组数组
const departmentGroups = [
    { label: '语文科组', value: '语文科组' },
    { label: '数学科组', value: '数学科组' },
    { label: '英语科组', value: '英语科组' },
    { label: '政治科组', value: '政治科组' },
    { label: '历史科组', value: '历史科组' },
    { label: '地理科组', value: '地理科组' },
    { label: '物理科组', value: '物理科组' },
    { label: '化学科组', value: '化学科组' },
    { label: '生物科组', value: '生物科组' },
    { label: '体育科组', value: '体育科组' },
    { label: '艺术科组', value: '艺术科组' },
    { label: '技术科组', value: '技术科组' },
    { label: '心理科组', value: '心理科组' }
]
// 点击预览
const preview = () => {
    emit('changePreviewStaus', true)
}
const percentNum = ref<number>(0)
const isShowPrograss = ref<boolean>(false)
const editForm = reactive<any>({
    id: '',
    title: '',
    content: '',
    cover: '',
    module_id: '',
    category_id: [],
    tags: [],
    link: '',
    oldTags: [],
    is_top: 0,
    up_down: 1,
    allow_comment: 1,
    allow_download: 1,
    attachs: [],
    oldAttachs: [],
    show_time: '',
    expire: '',
})
const editFormRef = ref<FormInstance>()
const editFormRules = reactive<FormRules>({
    title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    module_id: [{ required: true, message: '请选择模块分类', trigger: 'blur' }],
    // category_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
    cover: [{ required: true, message: '请上传文章封面', trigger: 'blur' }],
})
const selectModule = async (val: any) => {
    await getTreeList()
}
//  获取分类
const getTreeList = async () => {
    const params = {
        module_id: editForm.module_id,
    }
    const res: any = await newsCategory(params)
    if (res.code !== 1) return ElMessage.error(res.msg)
    dataItem.value = res.data
}
const getDetail = async () => {
    const res: any = await detailNews({ id: props.editId })
    if (res.code !== 1) return ElMessage.error(res.msg)
    var data = res.data
    editForm.uuid = data.info.uuid
    editForm.module_id = data.info.module_id
    await getTreeList()
    editForm.title = data.info.title
    editForm.content = data.info.content
    // 查找文章分类的上级
    let str: any = []
    var idsArr = []
    let arr = $util.getAllParentArr(dataItem.value, data.info.category_id)
    if (arr !== undefined) {
        arr.reverse().forEach((k: any) => {
            str.push(k.id)
        })
        idsArr = str
    }
    editForm.category_id = idsArr
    editForm.res_type = data.info.res_type
    editForm.news_type = JSON.stringify(data.info.news_type)
    editForm.tags = data.tags && data.tags.length > 0 ? data.tags.split(',') : []
    editForm.oldTags = JSON.parse(JSON.stringify(editForm.tags)) // 旧数据，为了判定编辑是否需要传值
    editForm.link = data.info.link
    editForm.is_top = Number(data.info.is_top)
    editForm.allow_comment = Number(data.info.allow_comment)
    editForm.allow_download = Number(data.info.allow_download)
    editForm.cover = data.info.cover
    editForm.attachs = JSON.parse(JSON.stringify(data.attachs))
    editForm.oldAttachs = JSON.parse(JSON.stringify(editForm.attachs)) // 旧数据，为了判定编辑是否需要传值
    editForm.show_time = data.info.publish_date
    editForm.expire = data.info.expire
}
const handleClose = (index: Number) => {
    editForm.tags.splice(index, 1)
}
const handleInputConfirm = () => {
    if (editForm.tags.includes(tagInput.value)) {
        return ElMessage.error('文章标签不能重复!')
    }
    if (tagInput.value) {
        editForm.tags.push(tagInput.value)
    }
    tagInput.value = ''
}
const changeSelect = (val: any) => {
    if (editForm.tags.includes(tagSelect.value)) {
        tagSelect.value = ''
        return ElMessage.error('文章标签不能重复!')
    }
    if (val) {
        editForm.tags.push(tagSelect.value)
        setTimeout(() => {
            tagSelect.value = ''
        }, 500);
    }
}
// 查看图片
const srcList = ref<any>([])
const showViewer = ref(false)// 显示查看器
const showImage = () => {
    srcList.value = []
    srcList.value.push(editForm.cover)
    showViewer.value = true
}
const closeViewer = () => {
    showViewer.value = false
}
// 上传图片
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
    const typeList = ['image/jpeg', 'image/png']
    const isTypeValid = typeList.includes(rawFile.type)
    // const isLt2M = rawFile.size / 1024 / 1024 < 2
    if (!isTypeValid) {
        ElMessage.error('请上传正确的图片!')
        return false
    }
    // if (!isLt2M) {
    //     Message.error('上传图片大小不能超过2M!')
    //     return false
    // }
    const params: any = { size: 200, type: 'image/jpeg' }
    return new Promise(async (resolve, reject) => {
        if (rawFile.size / 1024 > 300) { // 大于 300 kb 就压缩
            let file: any = await pngToWhiteBg(rawFile)
            const fileOfBlob = new File([file], `${new Date().getTime()}.png`, { type: file.type })
            imageConversion.compressAccurately(fileOfBlob, 250).then(res => {
                resolve(res)
            })
        } else if (isTypeValid) {
            // 无需压缩直接返回原文件
            resolve(rawFile)
        } else {
            reject()
        }
    })
}
const pngToWhiteBg = async (file: any) => {
    let read = new FileReader();
    read.readAsDataURL(file); // 文件转base64
    return new Promise((resolve, reject) => {
        read.onload = (e: any) => {
            let img: any = new Image();
            img.src = e.target.result;
            img.onload = async () => {
                // 生成canvas
                let canvas = document.createElement("canvas");
                let context: any = canvas.getContext("2d");
                // 绘制图片到canvas上
                canvas.width = img.width;
                canvas.height = img.height;

                // 在canvas绘制前填充白色背景
                context.fillStyle = "#fff";
                context.fillRect(0, 0, canvas.width, canvas.height);
                context.drawImage(img, 0, 0);
                let base64 = canvas.toDataURL(file["type"], 1);
                let newFile = dataUrlToFile(base64);
                resolve(newFile);
            }
        }
    })
}
const dataUrlToFile = async (dataurl: any) => {
    let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
}
const uploadAvatorAdd = async (options: UploadRequestOptions) => {
    upload(options.file, (res: any) => {
        editForm.cover = res.inch
    },
        (error: any) => {
            console.log(error)
        },
        (percent: any) => {
            console.log(percent)
        }
    )
}
const handleRemove = () => {
    editForm.cover = ''
}
// 上传附件
const uploadAvatorAdd2 = async (options: UploadRequestOptions) => {
    isShowPrograss.value = true
    uploadBig(options.file, (res: any) => {
        var fileArr = res.name.split('.');
        editForm.attachs.push({
            ext: fileArr[fileArr.length - 1],
            name: res.name,
            real_name: res.real_name,
            size: res.size,
            url: res.inch
        })
        percentNum.value = 100
        setTimeout(() => {
            isShowPrograss.value = false
            percentNum.value = 0
        }, 1000);
    },
        (error: any) => {
            console.log(error)
        },
        (percent: any) => {
            // 上传文件进程百分比
            console.log(percent)
            percentNum.value = percent.percent
        }
    )
}
// 删除附件
const delAttachs = async (index: number) => {
    editForm.attachs.splice(index, 1)
}
const changeInput = (params: string) => {
    editForm.content = params
}
// 点击保存
const modelConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid: any) => {
        if (valid) {
            // 处理内容中的空格，将连续空格转换为&nbsp;
            let processedContent = editForm.content;
            // 方案1: 将所有空格转换为&nbsp;
            // processedContent = processedContent.replace(/ /g, '&nbsp;');

            // 方案2: 只将连续的空格(两个及以上)转换为&nbsp;
            processedContent = processedContent.replace(/ {2,}/g, (match: any) => {
                return '&nbsp;'.repeat(match.length);
            })
            const params: any = {
                cover: editForm.cover,
                title: editForm.title,
                content: processedContent,
                // category_id: editForm.category_id.length > 0 ? editForm.category_id[editForm.category_id.length - 1] : '',
                module_id: editForm.module_id,
                is_top: editForm.is_top,
                up_down: editForm.is_top,
                allow_comment: editForm.allow_comment,
                allow_download: editForm.allow_download,
                link: editForm.link,
                attachs: editForm.attachs,
                tags: editForm.tags && editForm.tags.length > 0 ? editForm.tags.join(',') : '',
                show_time: editForm.show_time,
                expire: editForm.expire,
            }
            if (props.editId) {
                params.id = props.editId
            }
            if (!editForm.category_id || editForm.category_id.length === 0) {
                params.category_id = editForm.module_id
            } else {
                params.category_id = editForm.category_id[editForm.category_id.length - 1]
            }
            const res: any = props.editId ? await editNews(params) : await addNews(params)
            if (res.code !== 1) return ElMessage.error(res.msg)
            ElMessage.success(res.msg)
            await emit('setModuleId', editForm.module_id)
            await emit('getList')
            emit('modelCancel')
            reactCancel(editFormRef.value)
        } else {
            console.log('error submit!')
        }
    })
}
const reactCancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    emit('modelCancel')
    console.log("jinliale")
    editForm.attachs = []
    tagInput.value = ''
    editForm.tags = []
    formEl.resetFields()
}
watch(
    () => props.editFormVisible,
    (newValue, oldValue) => {
        // 获取文章详情
        if (props.editId && props.editFormVisible) {
            setTimeout(() => {
                getDetail()
            }, 200);
        }
        if (props.editFormVisible && !props.editId && props.moduleType.length === 1 ) {
            console.log('props.moduleType', props.moduleType)
            editForm.module_id = props.moduleType[0].uuid
        }
    },
    { deep: true, immediate: true }
)
onMounted(() => {
})
defineExpose({ reactCancel, editFormRef, isShowPrograss })
</script>
<style lang="scss" scoped>
.edtiArticle {
    height: 100%;

    .drawerTop {
        height: calc(100% - 60px);

        .el-form,
        .el-row {
            width: 100%;
            height: 100%;



            .leftBox {
                width: 100%;
                border-right: 1px solid #DCDFE6;
                padding: 20px;
                flex: 2;
                height: calc(100% - 0px);
                box-sizing: border-box;

                .title {
                    font-weight: bold;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 10px;
                }
            }

            .rightBox {
                width: 100%;
                height: 100%;
                // padding: 20px;
                position: relative;

                .title {
                    height: 48px;
                    line-height: 48px;
                    padding: 0 20px;
                    border-bottom: 1px solid #E4E4E4;
                    font-weight: bold;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 15px;
                }

                .seetingBox {
                    padding: 0 20px;
                    height: calc(100% - 100px);
                    overflow-y: scroll;
                }

                :deep(.el-tag) {
                    .el-tag__close {
                        color: #666666;
                    }

                    .el-tag__close:hover {
                        color: #fff;
                        background: #999999;
                    }
                }

                .uploadList {
                    display: flex;
                    flex-flow: wrap;
                    width: 100%;

                    .items {
                        width: 120px;
                        height: 72px;
                        background: #EEEEEE;
                        display: inline-block;
                        margin: 0 20px 0 0;
                        border-radius: 4px;
                        border: 1px dashed #DCDCDC;
                        position: relative;
                        padding: 6px;
                        box-sizing: border-box;

                        .el-image {
                            border-radius: 4px;
                            background: #ffffff
                        }

                        .model-img-box {
                            background: rgba(0, 0, 0, 0.5);
                            width: 100%;
                            height: 72px;
                            position: absolute;
                            cursor: pointer;
                            top: 0;
                            left: 0;
                            border-radius: 4px;
                            z-index: 9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fff;

                            i {
                                color: #fff;
                                font-size: 16px;
                            }

                            .mine-flex-box {
                                display: flex;
                                width: 65%;
                                justify-content: space-between;
                                align-items: center;

                                .el-icon {
                                    transition: all 1s;
                                    font-weight: bold;
                                }

                                span {
                                    width: 1px;
                                    margin: 0 7px;
                                    height: 12px;
                                    background: rgba(255, 255, 255, 0.9);
                                    display: inline-block;
                                }

                                .el-icon:first-of-type:hover {
                                    transform: scale(1.2);
                                }

                                .el-icon:last-of-type:hover {
                                    transform: scale(1.2);
                                }

                                // :deep(.avatar-uploader) {
                                //     width: 16px;
                                //     height: 16px;
                                //     margin: 0px;


                                // }

                                // :deep(.avatar-uploader .el-upload) {
                                //     width: 16px;
                                //     height: 16px;
                                //     border: none;
                                //     background-color: transparent;
                                // }
                            }

                            .zoom-big-box {
                                display: flex;
                                align-items: center;
                                transition: all 1s;
                            }
                        }
                    }

                    :deep(.avatar-uploader .el-upload) {
                        width: 120px;
                        height: 72px;
                        background: #EEEEEE;
                        border-radius: 4px;
                        border: 1px dashed #DCDCDC;
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.4);
                        box-sizing: border-box;
                    }

                    :deep(.el-icon.avatar-uploader-icon) {
                        color: #000000;
                        margin-bottom: 0px;
                        font-size: 14px;
                        font-weight: 600;
                    }

                    :deep(.avatar-uploader) {
                        margin: 0px;
                        width: 88px;
                    }
                }

                .uploadList2 {
                    :deep(.avatar-uploader .el-upload) {
                        width: 32px;
                        height: 32px;
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #CECECE;
                        box-sizing: border-box;
                    }

                    :deep(.el-icon.avatar-uploader-icon) {
                        color: #666666;
                        margin-bottom: 3px;
                        font-size: 14px;
                        font-weight: 600;
                    }

                    :deep(.avatar-uploader) {
                        margin: 0px;
                        width: 32px;
                        height: 32px;
                    }
                }

                .fillBox {
                    min-height: 44px;
                    max-height: 59%;
                    border: 1px solid #E4E4E4;
                    border-radius: 4px;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        width: 5px !important;
                        height: 5px !important;
                        display: block !important;
                    }

                    .item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 15px;
                        border-bottom: 1px dashed #E5E5E5;

                        .fileInfo {
                            display: flex;
                            align-items: center;
                            min-width: 0px;

                            span {
                                margin: 0 10px;
                                flex: 1;
                                min-width: 0;
                                word-wrap: break-word;
                            }
                        }
                    }

                    .item:last-of-type {
                        border: none;
                    }
                }

                .progressBox {
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                    left: 0px;
                    width: 100%;

                    :deep(.el-progress-bar__outer) {
                        border-radius: 0px;
                        background: #F0F0F0;
                    }

                    :deep(.el-progress-bar__inner) {
                        border-radius: 0px;
                    }
                }
            }
        }
    }

    .fixed-btn-box2 {
        border-top: 1px solid #DCDFE6;

        .el-button {
            margin-top: 15px;
            margin-right: 15px;
            float: right;
        }
    }

    :deep(.el-drawer) {
        width: 70% !important;
    }
}

.tips {
    width: 100%;
    display: flex;
    font-size: 12px;
    align-items: center;
    line-height: 20px;
    margin-top: 5px;

    .el-image {
        display: flex;
        align-items: center;
        margin-right: 5px;
        margin-top: 3px;
    }
}

:deep(.el-select__popper.el-popper) {
    inset: 40px auto auto auto !important;
}

:deep(.el-cascader__dropdown.el-popper) {
    inset: 40px auto auto auto !important;
}
</style>